<template>
	<view class="box bg-light w-100 p-3">
		<!-- 我的卡包 -->
		<view class="flex flex-column justify-center">
			<view v-for="(item,index) in tableData2" :key="index" class="p-2 item rounded-lg bg-white w-100 ">
				<view class="t1 p-2 rounded-lg back" @click="handleTabs('/pages/card/Crad_details?Prepayment_Card_Scheme_SerialNumber='+item.Prepayment_Card_Scheme_SerialNumber+'&Balance='+(Number(item.Prepayment_Balance) + Number(item.Gift_Balance)))" :style="'background-image: url('+Domain_IMG+item.Picture_URL+');'">
					<!-- <image style="height: 100%;" :src="Domain_IMG + item.Picture_URL" mode="heightFix"></image> -->
					<view class="font-lg font-weight-bolder text-center text-white">{{item.Prepayment_Card_Scheme_Name}}</view>
					<view class="font text-right text-info"><text>￥{{item.Starting_Amount}}</text></view>
				</view>
				<view class="t2 font-md mt-2">
					<text class="font text-muted">当前剩余:</text>
					<text class="font-weight-bolder">￥{{Number(item.Prepayment_Balance) + Number(item.Gift_Balance)}}</text>
				</view>
				<view v-if="false" class="t2 font-md mt-1">
					<text style="font text-">使用记录:</text>
					<view>2次<uni-icons type="right" size="10"></uni-icons></view>
				</view>
			</view>
		</view>
		<view class="foot flex flex-column align-center justify-center">
			<view class="mx-3 w-100 flex justify-between align-center my-3" @click="handleTabs('/pages/card/Card_Purchase_Center')">
				<view class="font font-weight-bold">可购储值卡</view>
				<view>
					<text class="font text-muted">更多</text>
					<uni-icons type="right" size="15" color="#828d96"></uni-icons>
				</view>
			</view>
			<view class="f1 flex justify-center w-100">
				<view class="f1_f mb-2" v-for="(item,i) in tableData" :key="i" @click="handleTabs('/pages/card/Purchase_Crad?Prepayment_Card_Scheme_SerialNumber='+item.Prepayment_Card_Scheme_SerialNumber)" style="position: relative;background-color: blue;overflow: hidden;">
					<image style="height: 100%;" :src="Domain_IMG + item.Picture_URL" mode="heightFix"></image>
					<view class="text-white" style="position: absolute;top: auto;right: 0;bottom: 0;left: 0;">
						<view class="font-lg text-ellipsis font-weight-bolder text-center ">{{item.Prepayment_Card_Scheme_Name}}</view>
						<view class="font text-right"><text>￥{{item.Starting_Amount}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import {WXPrepaymentCardAll,WXMyprepaymentCard,} from '@/api/group.js'
	export default {
		data() {
			return {
				Domain_IMG:app.globalData.Domain_IMG,
				form:{
					page:1,
					limit:5,
					Enterprise_Info_SerialNumber:app.globalData.enterprise,
					App_ID:app.globalData.appid,
				},
				form1:{
					Open_ID:app.globalData.openid,
					App_ID:app.globalData.appid,
					Enterprise_Info_SerialNumber:app.globalData.enterprise,
				},
				tableData:[],
				tableData2:[],
				total:1,
			};
		},
		onLoad() {
			this.getAllCard(this.form)
			this.getMyCard(this.form1)
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			async getMyCard(data){
				if(data.Open_ID==''){
					return
				}
				const res = await WXMyprepaymentCard(data)
				console.log(res)
				if(res.Status=='success'){
					this.tableData2 = res.Data
				}
			},
			async getAllCard(data){
				uni.showLoading({
					title:'加载中...'
				})
				const res = await WXPrepaymentCardAll(data)
				console.log(res)
				uni.hideLoading()
				if(res.Status=='success'){
					this.tableData = res.tableData
					this.total = Number(res.limit)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		// height: calc(100vh);
		width: 100%;
		box-sizing: border-box;

		.item {
			box-sizing: border-box;

			.t1 {
				height: 300rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				box-sizing: border-box;
				border: 1px solid #000;
			}

			.t2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx 20rpx 20rpx;
				box-sizing: border-box;
			}
		}

		.foot {
			.f1 {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.f1_f {
					width: 47%;
					// border: 1px solid red;
					height: 300rpx;
					border-radius: 20rpx;
					background-color: #fff;
					display: flex;
					justify-content: space-around;
					flex-direction: column;
					box-sizing: border-box;
				}
			}
		}

	}
	.back{
		background-repeat: no-repeat;
		background-size: cover;
	}
</style>